<template>
	<div class="ShopAccount taskAppeal app-container">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>加班报备列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input v-model="query.task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="query.staff_name" placeholder="发起人"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="query.mobile" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_150"
									v-model="query.shop_name"
									:fetch-suggestions="querySearch"
									placeholder="请选择店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
									clearable
								></el-autocomplete>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="s_time_slot" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="mt">
								<el-cascader
									v-model="type_arr"
									:options="industryArr"
									:props="optionProps"
									placeholder="请选择岗位"
									@change="changeBtndialogtype" clearable></el-cascader>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.type" placeholder="申诉类型">
									<el-option label="加工时" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.status" placeholder="审核状态">
									<el-option label="待审核" value="10"></el-option>
									<el-option label="审核通过" value="30"></el-option>
									<el-option label="审核驳回" value="20"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="提交开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="提交结束时间"
								>
								</el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_sn" label="任务编号" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="申诉编号" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="staff_name" label="发起人" width="80px"> </el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type_name" label="申诉类型" width="80px"> </el-table-column>
						<el-table-column prop="hour" label="加班时长(h)" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.hour }}h</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="提交时间" width="150px"></el-table-column>
						<el-table-column prop="status" label="审核状态" width="80px">
							<template slot-scope="{ row }">
								<span v-if="row.status == '10'">待审核</span>
								<span class="text-danger" v-if="row.status == '20'">驳回</span>
								<span class="text-success" v-if="row.status == '30'">通过</span>
							</template>
						</el-table-column>
						<el-table-column prop="audit_name" label="处理人" width="100px"></el-table-column>
						<el-table-column prop="audit_time" label="审核时间" width="150px"></el-table-column>
						<el-table-column prop="remark" label="备注" width="200px"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.area_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="job_name" label="岗位" width="90px">
							<template slot-scope="{ row }">
								<span>{{ row.job_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_start_time" label="任务开始/结束时间" width="150px">
							<template slot-scope="{ row }">
								<span
									>{{ $moment(row.task_start_time).format('MM-DD') }}
									{{ $moment(row.task_start_time).format('HH:mm') }}-{{
										$moment(row.task_end_time).format('HH:mm')
									}}</span
								>
							</template>
						</el-table-column>
						<el-table-column prop="checkin_time" label="签到时间" width="150px"></el-table-column>
						<el-table-column prop="finish_time" label="签退时间" width="150px"></el-table-column>
						<el-table-column prop="task_status_name" label="任务状态" width="80px"> </el-table-column>
						<el-table-column label="操作" min-width="150" fixed="right">
							<template slot-scope="{ row }">
								<el-link v-if="row.status == '10'" :underline="false" type="warning" @click="showFrame(row)"
									>人工处理</el-link
								>
								<el-link v-if="row.status != '10'" :underline="false" type="primary" @click="showFrame(row)"
									>详情</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<el-dialog title="人工处理" :visible.sync="frameStatus" width="1100px" :close-on-click-modal="false">
			<div style="display: flex;">
				<div style="display: flex; flex-direction: column;">
					<p style="width: 120px; text-align: right; margin: 0 auto 20px; font-size: 18px; color: black;">申诉明细</p>
					<div style="display: flex;">
						<div class="auditCentent">
							<div class="row-info clear">
								<div class="fl title-key">任务编号：</div>
								<div class="fl list-cont">
									{{ ret.task_sn }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">提交时间：</div>
								<div class="fl list-cont">
									{{ ret.add_time }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">接单人：</div>
								<div class="fl list-cont">
									{{ ret.creater_name }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">店铺名称：</div>
								<div class="fl list-cont">
									{{ ret.shop_name }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">任务开始时间：</div>
								<div class="fl list-cont">
									{{ ret.task_start_time }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">签到时间：</div>
								<div class="fl list-cont">
									{{ ret.checkin_time }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">申诉原因：</div>
								<div class="fl list-cont">
									{{ ret.remark }}
								</div>
							</div>
						</div>
						<div class="auditCentent">
							<div class="row-info clear">
								<div class="fl title-key">申诉类型：</div>
								<div class="fl list-cont">
									{{ ret.type_name }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">加班时长：</div>
								<div class="fl list-cont">{{ ret.hour }}h</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">手机号：</div>
								<div class="fl list-cont">
									{{ ret.mobile }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">商圈：</div>
								<div class="fl list-cont">
									{{ ret.area_name }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">任务结束时间：</div>
								<div class="fl list-cont">
									{{ ret.task_end_time }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">签退时间：</div>
								<div class="fl list-cont">
									{{ ret.finish_time }}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="display: flex; flex-direction: column;">
					<p style="width: 120px; text-align: right; margin: 0 auto 20px; font-size: 18px; color: black;">人工处理</p>

					<div class="auditCentent">
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing" v-if="status == 10"></i>审批结果：</div>
							<div class="fl list-cont" v-if="status == 10">
								<el-radio-group v-model="audit.status">
									<el-radio label="30">通过</el-radio>
									<el-radio label="20">驳回</el-radio>
								</el-radio-group>
							</div>
							<div class="fl list-cont" v-else>
								{{ ret.status_name }}
							</div>
						</div>
						<!-- 审核成功之后点击详情显示 -->
						<div v-if="status == 30" class="clear">
							<div class="row-info clear">
								<div class="fl title-key">审批人：</div>
								<div class="fl list-cont">
									{{ ret.audit_name }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">审批时间：</div>
								<div class="fl list-cont">
									{{ ret.audit_time }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">B端调账：</div>
								<div class="fl list-cont" style="color: #02a7f0; cursor: pointer;" @click="toMore(ret.adjust_shop_sn)">
									{{ ret.adjust_shop_sn }}
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">C端调账：</div>
								<div class="fl list-cont" style="color: #02a7f0; cursor: pointer;" @click="toMore(ret.adjust_staff_sn)">
									{{ ret.adjust_staff_sn }}
								</div>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">
								<i class="lhadmin lhadmin-wujiaoxing" v-if="audit.status == 20 && status == 10"></i>备注：
							</div>
							<div class="fl list-cont" v-if="status == 10">
								<el-input type="textarea" :rows="4" :cols="32" v-model="audit.audit_reason"></el-input>
							</div>
							<div class="fl list-cont" v-else>
								{{ ret.audit_reason }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="auditBtn()" v-if="status == 10">确 定</span>
				<span class="resetBtn" @click="hiddenRY()">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { editSupplier, auditSupplier, getQrCode, getListForSearch } from '@/api/supplier.js'
import { overtimeGetList, overtimeGetInfo, overtimeAudit } from '@/api/task.js'
import { fetchQrcodeList } from '@/api/staff.js'
import { fetchAreaList } from '@/api/shop.js'
import { fetchLabelList } from '@/api/shop.js'
import { fetchIndustryJob } from '@/api/label.js'

export default {
	name: 'SupplierList',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			cityList: [], //城市列表
			job_arr: '', // 岗位标签数组
			type_arr: '',
			//搜索对应值
			query: {
				task_sn: '',
				staff_name: '',
				mobile: '',
				shop_name: '',
				job_type: '',
				type: '',
				status: '',
				start_time: '',
				end_time: '',
				agent_id: ''
			},
			agent_reset: 0,
			area_name: '',
			demandList: [],
			area_arr: [],
			areaList: [],
			shopList: [], //店铺列表
			frameStatus: false,
			gysUrl: '',
			gysName: '',
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			searchList: [],
			cjrSearchList: [],
			shrSearchList: [],
			ret: {},
			audit: {
				sn: '',
				status: '',
				audit_reason: ''
			},
			status: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			s_time_slot: '',
			cityList: [], // 城市列表
			city_val: '',
			city_id: '',
			areaStatus: true,
			industryArr: [],
			optionProps:{
				value: 'id',
				label: 'label_name'
			}
		}
	},
	// computed: {
	// 	city_value() {
	// 		return this.city_val
	// 	}
	// },
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listData()
		}
	},
	created() {
		//this.alljob_type()
		this.getShrListSearch()
	},
	mounted() {},
	methods: {
		//标签接口 搜索获取
		async alljob_type() {
			this.type_arr = '';
			try {
        		let ret = await fetchIndustryJob({
					city_id: this.city_id
				})
				if(ret.length>0){
					this.industryArr = ret
				}else{
					this.industryArr = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		setValue(data) {
			this.query.agent_id = data.agent_id
			// 清除店铺名称
			this.query.shop_name = ''

			this.cityList = data.city_list
			if (this.cityList.length > 0) {
				this.city_val = this.cityList[0].name
				this.city_id = this.cityList[0].id
			}
			this.listArea(this.city_id) //商圈列表
			this.listUser() //店铺列表
			this.alljob_type() //行业
		},
		listUser() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			fn.append('agent_id', this.query.agent_id) //启用的店铺
			fn.append('city_id', this.city_id) //启用的店铺
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
						} else {
							this.shopList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//标签接口
		// async alljob_type() {
		// 	try {
		// 		let ret = await fetchLabelList({
		// 			label_type: 'job_type'
		// 		})
		// 		this.job_arr = ret
		// 	} catch (error) {
		// 		console.log('error:', error)
		// 	}
		// },
		async listData() {
			try {
				var s_departmentIds_Arr = []
				this.s_time_slot.forEach(element => {
					let [id, name] = element.split('|')
					s_departmentIds_Arr.push(id.toString())
				})
				let ret = await overtimeGetList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					...this.query,
					area_id: s_departmentIds_Arr.toString(),
					city_id: this.city_id
				})
				if (ret.list) {
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log('err:', err)
			}
		},
		async getShrListSearch() {
			try {
				let ret = await getListForSearch({
					type: 2
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.shrSearchList = ret.list
			} catch (err) {
				console.log(err)
			}
		},
		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		async resetDataBtn() {
			await this.resetData()
			this.listData()
		},
		async resetData() {
			this.pageNum = 1
			for (let key in this.query) {
				if (!key == 'agent_id') this.query[key] = ''
			}
			this.area_arr = ''
			this.type_arr = ''

			// 重置代理商
			this.agent_reset += 1
		},
		downloadOrder(row) {
			var s_departmentIds_Arr = []
			this.s_time_slot.forEach(element => {
				let [id, name] = element.split('|')
				s_departmentIds_Arr.push(id.toString())
			})
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				...this.query,
				area_id: s_departmentIds_Arr.toString(),
				city_id: this.city_id,
				operation: 'export'
			}

			let param = $.param(obj)
			window.location.href = this.url + '/overtime/getList?' + param
		},
		async showFrame(row) {
			this.frameStatus = true
			this.audit.sn = row.sn
			this.status = row.status
			// 显示申诉明细-详情
			try {
				let ret = await overtimeGetInfo({
					sn: row.sn
				})
				this.ret = ret
				// console.log(ret)
			} catch (err) {
				console.log(err)
			}
		},
		// 选择商圈
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|').toString() // es6 数组解构赋值
			this.query.area_id = id.toString()
			this.area_name = name.toString()
		},
		// 选择岗位
		changeBtndialogtype() {
			// let [id, name] = this.type_arr.split('|') // es6 数组解构赋值
			this.query.job_type = this.type_arr[1]
			//this.label_name = name
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		//隐藏所有的弹框
		hiddenRY() {
			this.ret = {}
			this.frameStatus = false
			this.audit.sn = ''
			this.audit.status = ''
			this.audit.audit_reason = ''
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		changeCity() {
			if (!this.city_val) return
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			// 清除店铺名称
			this.query.shop_name = ''

			this.listArea(this.city_id)
			this.listUser() //店铺列表
			this.alljob_type()
		},
		async auditBtn() {
			if (this.audit.status == 20) {
				if (!this.audit.status || !this.audit.audit_reason) {
					this.$message.error('必填项不可为空！')
					return
				}
			} else {
				if (!this.audit.status) {
					this.$message.error('必填项不可为空！')
					return
				}
			}

			try {
				let ret = await overtimeAudit(this.audit)
				this.$message.success('审批成功！')
				this.listData()
				this.hiddenRY()
			} catch (err) {
				console.log(err)
			}
		},
		toMore(sn) {
			const { href } = this.$router.resolve({
				path: '/adjustmentList',
				query: {
					adjustment_sn: sn
				}
			})
			window.open(href, '_blank')
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.s_time_slot = arr
			} else {
				this.s_time_slot = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},
		// 获取商圈列表
		async listArea(city_id) {
			try {
				this.s_time_slot = []
				let ret = await fetchAreaList({
					city_id: city_id,
					agent_id: this.query.agent_id
				})
				console.log(ret)
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.area_name
					})
					this.areaList = ret.list

					// 如果本地this.area_arr。存在值，那么不再赋予，如果不存在。赋予相关值
					// if (this.s_time_slot == '' || this.s_time_slot == null) {
					// 	// 默认选中非254-平谷的
					// 	this.areaList.forEach(element => {
					// 		// 平谷
					// 		if (element.area_name != '平谷' && element.id != 0) {
					// 			var pusharr = element.id + '|' + element.area_name
					// 			this.s_time_slot.push(pusharr)
					// 		}
					// 	})
					// }
				} else {
					this.areaList = []
				}
			} catch (err) {
				console.log('--------11111 err', err)
			}
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}

.gys-style {
	font-size: 16px;
	text-align: center;
	background: #4fc5ca;
	padding: 10px 0;
	border-radius: 0px;
	color: #fff;
	position: relative;
	top: -30px;
	width: 500px;
	left: -20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}

.taskAppeal .row-info .title-key {
	width: 120px;
}
.mt{
	margin-top: -4px;
}
</style>



// WEBPACK FOOTER //
// src/components/taskList/TaskAppeal.vue